/* eslint-disable react/prefer-stateless-function */
import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';

import {
    Card, Row, Col, InputNumber,
} from 'antd';

import '@ant-design/compatible/assets/index.css';

const valueNames = [
    '　　　大箱',
    '　　　中箱',
    '　　　小箱',
    '　　超小箱',
    '　大箱(宽)',
    '　中箱(宽)',
    '　小箱(宽)',
    '超小箱(宽)',
    '　　文件箱',
    '文件箱(宽)',
    '　　超大箱',
    '超大箱(宽)',
];

interface DeliveryFeeProps {
    getFieldDecorator: any;
    detailInfo: any;
    maxCents: any;
    maxPercentage: any;
}

class DeliveryFeeElem extends Component<DeliveryFeeProps> {
    render() {
        const { getFieldDecorator, detailInfo, maxCents } = this.props;

        return (
            <Card title="投递费用" bordered={false}>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    {valueNames.map((item: any, index: number) => {
                        const number = index < 9 ? `0${index + 1}` : index + 1;
                        const tips = item.replace(/\s+/g, '');
                        return (
                            <Col
                                md={8}
                                sm={24}
                                key={item}
                                style={{ display: 'flex' }}
                            >
                                <Form.Item
                                    label={item}
                                    colon={false}
                                    style={{ flex: 1 }}
                                >
                                    {getFieldDecorator(`useP109${number}`, ({
                                        initialValue: detailInfo[`useP109${number}`],
                                        rules: [{ required: true, message: `请输入${tips}费用` }],
                                    }))(
                                        <InputNumber
                                            min={0}
                                            max={maxCents}
                                            step={1}
                                            placeholder="请输入"
                                            style={{ width: '100%' }}
                                        />,
                                    )}
                                </Form.Item>
                                <span className="marginL8" style={{ lineHeight: '32px' }}>分</span>
                            </Col>
                        );
                    })}
                </Row>
            </Card>
        );
    }
}

export default DeliveryFeeElem;
